<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>我的成绩 - 智能选课系统</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<style type="text/css">
		.back-btn {
			display: block;
			text-align: center;
			margin-top: 25px;
		}

		.back-btn a {
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 5px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: white;
		}
		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
		}

		.score-container {
			max-width: 900px;
			margin: 0 auto;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}

		.score-header {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			padding: 20px 30px;
			text-align: center;
		}

		.score-header h3 {
			margin: 0;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.score-header h3 i {
			margin-right: 10px;
			font-size: 1.5rem;
		}

		.score-body {
			padding: 30px;
		}

		.table-container {
			overflow-x: auto;
		}

		.score-table {
			width: 100%;
			border-collapse: collapse;
			margin-top: 20px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		}

		.score-table th {
			background: linear-gradient(135deg, #302b63, #24243e);
			color: white;
			padding: 15px;
			text-align: center;
			font-weight: 600;
		}

		.score-table td {
			padding: 15px;
			text-align: center;
			border-bottom: 1px solid #eaeaea;
		}

		.score-table tr:nth-child(even) {
			background: #f9f9f9;
		}

		.score-table tr:hover {
			background: #f1f9ff;
		}

		.grade-cell {
			font-weight: 600;
		}

		.grade-high {
			color: #27ae60;
		}

		.grade-medium {
			color: #f39c12;
		}

		.grade-low {
			color: #e74c3c;
		}

		.no-data {
			text-align: center;
			padding: 40px;
			color: #7f8c8d;
		}

		.no-data i {
			font-size: 3rem;
			margin-bottom: 15px;
			display: block;
		}

		@media (max-width: 768px) {
			.score-body {
				padding: 20px 15px;
			}

			.score-table {
				font-size: 0.9rem;
			}

			.score-table th,
			.score-table td {
				padding: 10px 5px;
			}
		}
	</style>
</head>
<body>
<div class="score-container">
	<div class="score-header">
		<h3><i class="fas fa-chart-bar"></i> 我的成绩</h3>
	</div>

	<div class="score-body">
		<c:choose>
			<c:when test="${not empty requestScope.list}">
				<div class="table-container">
					<table class="score-table">
						<thead>
						<tr>
							<th>课程编号</th>
							<th>课程名称</th>
							<th>成绩</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach items="${requestScope.list}" var="e">
							<tr>
								<td>${e.getcNo()}</td>
								<td>${e.getcName()}</td>
								<td class="grade-cell
                                        <c:choose>
                                            <c:when test="${e.getGrade() >= 90}">grade-high</c:when>
                                            <c:when test="${e.getGrade() >= 60}">grade-medium</c:when>
                                            <c:otherwise>grade-low</c:otherwise>
                                        </c:choose>">
										${e.getGrade()}
								</td>
							</tr>
						</c:forEach>
						</tbody>
					</table>
				</div>
			</c:when>
			<c:otherwise>
				<div class="no-data">
					<i class="fas fa-inbox"></i>
					<h4>暂无成绩数据</h4>
					<p>您还没有成绩记录，请先完成课程学习</p>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
</div>
<div class="back-btn">
	<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
</div>
</body>
</html>